<template>
    <div style="opacity: 0.88;min-height: 100vh">
      <div class="manage-form">
        <div class="manage-title">
          <h2>日志管理</h2>
        </div>
          <div class="search-container" style="margin-bottom: 20px;">
          <el-input v-model="searchName" placeholder="按内容搜索日志" style="width: 300px; margin-right: 20px;" />
          <el-button @click="searchProduct">搜索</el-button>
         </div>
        <el-table :data="paginatedData" style="width: 100%">
          <el-table-column label="序号" prop="no" />
          <el-table-column label="时间" prop="date" />
          <el-table-column label="日志内容" prop="text" />
        </el-table>
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pageSize"
          :total="logs.length"
          layout="total, prev, pager, next, jumper"
        ></el-pagination>
      </div>
    </div>
  </template>
<script setup>
import { ref, computed, onMounted } from 'vue';
import axios from 'axios';
const logs = ref([]);
const currentPage = ref(1);
const pageSize = ref(10);
const searchName = ref('');
const fetchLogs = async () => {
  try {
    const response = await axios.get('http://localhost:8080/api/log');
    logs.value = response.data.sort((a, b) => b.id - a.id).map((log, index) => ({
      no: index + 1,
      id: log.id,
      date: log.date,
      text: log.text
    }));
  } catch (error) {
    console.error('Error fetching logs', error);
  }
};
const searchProduct = () => {
    currentPage.value = 1;  // 重置分页到第一页
  };
  const filteredData = computed(() => {
    return logs.value.filter(log => {
      return log.text.toLowerCase().includes(searchName.value.toLowerCase());
    });
  });
const paginatedData = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return filteredData.value.slice(start, end);
});

const handleCurrentChange = (page) => {
  currentPage.value = page;
};

onMounted(() => {
  fetchLogs();
});
</script>

<style scoped>
.manage-form .manage-title {
  font-size: 2em;
  text-align: center;
  text-shadow: 5px 5px 5px #0e42ff;
}

.manage-form {
  background-color: aliceblue;
}

.el-pagination {
  margin-top: 20px;
  text-align: center;
}
</style>